<template>
  <div class="page-shop">
    <h4 class="zl-title f-mt0">应用列表</h4>
    <div class="zl-page-loading" v-if="isLoading">
      <Spin fix></Spin>
    </div>
    <Row :gutter="10" class="shop-list" v-else>
      <Col :span="6" v-for="shop in shopList" :key="shop.shopId">
        <Card class="shop-box" @click.native="goShopDetail(shop)">
          <div class="shop-name flex">
            <div class="flex-label">
              <i>{{ shop.name | preName}}</i>
            </div>
            <div class="flex-1">
              <h4 class="f-nowrap">{{ shop.name }}</h4>
              <div class="f-nowrap">{{ shop.createTime }}</div>
            </div>
          </div>
          <div class="description flex">
            <div class="flex-name">描述：</div>
            <div class="flex-1 l2">{{ shop.info ? shop.info : '暂无描述' }}</div>
          </div>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
export default {
  name: 'ApplicationShop',
  data() {
    return {
      isLoading: true,
      shopList: []
    }
  },
  mounted() {
    let vm = this
    vm.$nextTick(function () {
      this.init()
    })
  },
  filters: {
    preName(val) {
      if (val) {
        return val.substring(0, 1)
      }
    }
  },
  methods: {
    init() {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/appstore/apptemplates',
        done: () => {
          this.isLoading = false
        }
      }).then((res) => {
        this.shopList = res.data.appTemplateList
      })
    },
    goShopDetail(shop) {
      this.$router.push('/home/environment/' + this.$route.params.environmentId + '/shop/' + shop.id)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .shop-list {
    padding: 14px 8px;
    min-height: 440px;
    border-radius: 4px;
    background-color: #fff;
  }
  .shop-box {
    position: relative;
    border-radius: 4px;
    margin-bottom: 10px;
    cursor: pointer;
    .shop-mani {
      position: absolute;
      right: 3px;
      top: 3px;
      display: none;
      color: #2d8cf0;
      font-size: 16px;
      i {
        margin-right: 5px;
      }
    }
    &:hover {
      .shop-mani {
        display: block;
      }
    }
    .shop-name {
      .flex-1 {
        h4 {
          font-size: 14px;
          color: #333;
        }
      }
      i {
        display: inline-block;
        vertical-align: top;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        line-height: 32px;
        font-size: 16px;
        font-style: normal;
        text-align: center;
        background-color: #6ac6c4;
        color: #fff;
        margin-right: 8px;
        &.inactive {
          background-color: #e45049;
        }
      }
    }
    .flex {
      line-height: 20px;
      font-size: 14px;
      color: #999;
    }
    .description {
      align-items: flex-start;
      height: 34px;
    }
  }
</style>
